<template>
  <div>
    <Card>
      <div slot="title" class="box12">
        <div>店铺管理</div>
        <el-button @click="baocun" type="primary">保存</el-button>
      </div>

      <div class="box11" slot="title1">
        <div class="box3">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="店铺名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="店铺公告">
              <el-input type="textarea" v-model="form.bulletin"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 店铺头像 -->
        <div class="box4">
          <span>店铺头像</span>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/shop/upload"
            :show-file-list="false"
          >
            <img v-if="form.avatar" :src="urlse + form.avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <!-- 文件上传多张图 -->
        <div class="box4">
          <span>店铺头像</span>
          <el-upload
            action="http://127.0.0.1:5000/shop/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="chenggong"
            :file-list="filelist"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <!-- 点击按钮弹出图片-->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="urlse + form.pics" alt="" />
        </el-dialog>

        <!-- 配送费 -->

        <div class="box6">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="配送费">
              <el-input v-model="form.deliveryPrice"></el-input>
            </el-form-item>

            <el-form-item label="配送时间">
              <el-input v-model="form.deliveryTime"></el-input>
            </el-form-item>

            <el-form-item label="配送描述">
              <el-input v-model="form.description"></el-input>
            </el-form-item>

            <el-form-item label="店铺评分">
              <el-input v-model="form.score"></el-input>
            </el-form-item>

            <el-form-item label="销量">
              <el-input v-model="form.sellCount"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 多选框 -->
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>

        <!-- 营业时间 -->
        <div class="box7">
          <el-time-picker
            is-range
            v-model="form.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
//引入卡片
/* 声明选项卡的内容 */
const cityOptions = [
  "在线支付满28减5",
  "VC无限橙果汁全场8折",
  "单人精彩套餐",
  "特价饮品8者购",
  "单人特色套餐",
];

import { apixq_js, apisc_js, apixg_js } from "@/apis/Echarts.js";

import Card from "@/components/Card.vue";
export default {
  components: {
    Card,
  },

  created() {
    this.getlist();
  },
  data() {
    return {
      urlse: "http://127.0.0.1:5000/upload/shop/",
      form: {
        id: "",
        name: "", //店铺名称
        bulletin: "", //公告
        avatar: "", //店铺头像
        deliveryPrice: "", //	配送费
        deliveryTime: "", //送达时间
        description: "", //描述
        score: "", //评分
        sellCount: "", //销量
        supports: [], //活动
        pics: [], //店铺图片
        date: [], //营业时间
        minPrice: "", //起送价格
        supports: "", //活动支持
      },
      //上传文件的列表
      filelist: [],
      //多项选择框
      checkAll: false,
      checkedCities: ["在线支付满28减5", "VC无限橙果汁全场8折"],
      cities: cityOptions,
      isIndeterminate: true,
      city: "",
      //控制图片在不在
      dialogVisible: false,
      //来的路径
      mageUrl: "",
    };
  },
  methods: {
    //产品的详情页
    async getlist() {
      let { data } = await apixq_js({});
      this.form = data;
      this.form.pics.forEach((item) =>
        this.filelist.push({ name: item, url: this.urlse + item })
      );
    },
    //头像的上传
    //图片的上传
    //多选框
    //文件上传成功的钩子
    chenggong(res) {
      let { msg, code, imgUrl } = res;
      //设置如果上传成功
      if (code === 0) {
        this.$message({
          type: "success",
          message: msg,
        });
        //这里直接push
        this.filelist.push({
          name: imgUrl,
          url: this.urlse + imgUrl,
        });
      }
      //这就是拿到的上传的图片
    },

    //点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(res) {
      console.log("点击文件列表中已上传的文件时的钩子" + res);
      this.dialogVisible = true;
    },
    //文件列表移除文件时的钩子
    handleRemove(res) {
      //点击移除的时候  要把this里面的值同时删除  在filelist中删除
      
      this.filelist.forEach((item,i) => {
        //判断一次
        if ((item.name == res.name)) {
          this.filelist.splice(i,1);
        }
      });
      console.log(this.filelist);
    },

    async baocun() {
      //把想要的图片发送给后台  然后就ok
      this.form.pics = this.filelist.map((item) => item.name);
      console.log(this.form.pics);
      await apixg_js(
        //this.form
        {
          id: this.form.id,
          name: this.form.name, //店铺名称
          bulletin: this.form.bulletin, //公告
          avatar: this.form.avatar, //店铺头像
          deliveryPrice: this.form.deliveryPrice, //	配送费
          deliveryTime: this.form.deliveryTime, //送达时间
          description: this.form.description, //描述
          score: this.form.score, //评分
          sellCount: this.form.sellCount, //销量
          supports: JSON.stringify(this.form.supports), //活动
          date: JSON.stringify(this.form.date), //营业时间
          pics: JSON.stringify(this.form.pics), //店铺图片
        }
      );
    },
  },
};
</script>



<style lang="less" scoped>
.box2 {
  display: flex;
  width: 300px;
}
.box3 {
  width: 600px;
}
.box4 {
  margin-top: 20px;
  font-size: 14px;
  display: flex;
  margin-left: 30px;
  span {
    padding-right: 14px;
    box-sizing: border-box;
  }
}
.box5 {
  font-size: 14px;
  display: flex;
  margin-left: 30px;
  margin-top: 20px;
  span {
    padding-right: 14px;
    box-sizing: border-box;
  }
}
.box12 {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}
.box6 {
  width: 600px;
  margin-top: 20px;
}
.avatar-uploader {
  border: 1px dashed #cccccc;
  width: 148px;
  height: 148px;
}
.box7 {
  margin-top: 20px;
}
.box11 {
  height: 750px;
  overflow: scroll;
}
//图像上传框样式
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>